<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/common.css">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/police/css/style.css">
</head>
<body>
   <div class="embedLeft">
       <div class="breadcrumb"><b>主页</b></div>
       <div class="embedRight">
           <div class="home_header mb20">
               <div class="welcome"><img src="http://p.qq181.com/cms/1210/2012100413195471481.jpg"/><span>上午好，${user.name!'管理员'}今天是${time!,dateFormat="yyyy-mm-dd hh:mm"}</span></div>
               <div class="state_wrap">
                   <ul class="state_list clearfix">
                       <li>
                           <p class="p_title">今日新增房东</p>
                           <p class="p_text color1">${today_Landlord}</p>
                       </li>
                       <li>
                           <p class="p_title">今日新增房客</p>
                           <p class="p_text color2">${today_tenant}</p>
                       </li>
                       <li>
                           <p class="p_title">今日新增房屋</p>
                           <p class="p_text color3">${today_room}</p>
                       </li>
                       <li>
                           <p class="p_title">今日新增门锁申请</p>
                           <p class="p_text color4">${today_tenantRoom}</p>
                       </li>
                       <li>
                           <p class="p_title">今日新增居住证申请</p>
                           <p class="p_text color6">${today_tenantLive}</p>
                       </li>
                   </ul>
               </div>
           </div>

           <div class="statBox mb20">
               <h3 class="h3_title">房东统计</h3>
               <div class="table_Box">
                   <table width="100%">
                       <tr>
                           <th>全部房东</th>
                           <th>出租屋数量</th>
                           <th>已出租</th>
                           <th>未出租</th>
                       </tr>
                       <tr>
                           <td>${countlandlord}</td>
                           <td>${countRoom}</td>
                           <td>${countTenantRoom}</td>
                           <td>${countRoom-countTenantRoom}</td>
                       </tr>
                   </table>
               </div>
           </div>

           <div class="statBox mb20">
               <h3 class="h3_title">流动人员统计</h3>
               <div class="table_Box">
                   <table width="100%">
                       <tr>
                           <th>入住人员</th>
                           <th>办理居住证人员</th>
                           <th>未办理居住证人员</th>
                       </tr>
                       <tr>
                           <td>${countTenant}</td>
                           <td>${countTenant-countsTenant}</td>
                           <td>${countsTenant}</td>
                       </tr>
                   </table>
               </div>
           </div>

           <div class="sex_age clearfix mb20">
               <div class="statBox fl">
                   <h3 class="h3_title">入住人员性别</h3>
                   <div id="Sex" style="height: 300px;"></div>
               </div>
               <div class="statBox fr">
                   <h3 class="h3_title">入住人员年龄</h3>
                   <div id="Age" style="height: 300px;"></div>
               </div>
           </div>

           <div class="statBox mb20">
               <h3 class="h3_title clearfix">
                   <span class="fl">开关门次数统计</span>
               </h3>
               <div id="Door" style="height: 400px;"></div>
           </div>

           <div class="statBox mb20">
               <h3 class="h3_title clearfix">
                   <span class="fl">入住退租人数</span>
                   <div class="select_wrap mselect fl">
                       <i class="i_drop"></i>
                       <span class="select_text"></span>
                       <select id="userNumber">
                           <option  id="two">十二个月内</option>
                           <option id="one">一个月内</option>
                       </select>
                   </div>
               </h3>
               <div id="Live" style="height: 400px;"></div>
           </div>

       </div>
   </div>
   <script type="text/javascript" src="${ctxPath}/static/police/js/jquery-1.11.1.min.js"></script>
   <script type="text/javascript" src="${ctxPath}/static/police/js/base.js"></script>
   <script type="text/javascript" src="${ctxPath}/static/police/js/echarts.min.js"></script>
   <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
       var myChart1 = echarts.init(document.getElementById('Sex'));
       var myChart2 = echarts.init(document.getElementById('Age'));
       // 指定图表的配置项和数据
       var option1 = {
           color: ['#60b9fa'],
           tooltip: {
               formatter: "占比:{c}%",
               show: true
           },
           grid:{
               x:50,
               y:20,
               x2:50,
               y2:20,
               borderWidth:1
           },
           xAxis: {
               data: ["男","女"]
           },
           yAxis: {},
           series: [{
               name: '性别',
               type: 'bar',
               barWidth: '30px',
               data: [parseFloat('${man!0}').toFixed(2), parseFloat('${woman!0}').toFixed(2)],
               itemStyle: {
                   normal: {
                       label : {
                           show:true,
                           position:'top',
                           formatter:'{c} %',
                           textStyle: {color:'#53A8E2'}
                       }
                   }
               }

           }]
       };
       var option2 = {
           color: ['#60b9fa'],
           grid:{
               x:50,
               y:20,
               x2:50,
               y2:20,
               borderWidth:1
           },
           tooltip: {
               formatter: "占比:{c}%",
               show: true
           },
           xAxis: {
               data: ["70后","85后","90后","95后","00后"]
           },
           yAxis: {},
           series: [{
               name: '年龄',
               type: 'bar',
               barWidth: '30px',
               data: [parseFloat('${one!0}').toFixed(2), parseFloat('${two!0}').toFixed(2),parseFloat('${three!0}').toFixed(2),parseFloat('${four!0}').toFixed(2),parseFloat('${fix!0}').toFixed(2)],
               itemStyle: {
                   normal: {
                       label : {
                           show:true,
                           position:'top',
                           formatter:'{c} %',
                           textStyle: {color:'#53A8E2'}
                       }
                   }
               }
           }]
       };
       // 使用刚指定的配置项和数据显示图表。
       myChart1.setOption(option1);
       myChart2.setOption(option2);


       var myChart3 = echarts.init(document.getElementById('Door'));
       option3 = {
           color: ['#87b9dc'],
           grid:{
               x:50,
               y:20,
               x2:50,
               y2:20,
               borderWidth:1
           },
           tooltip: {
               formatter: "数量:{c}",
               show: true
           },
           xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11', '12', '13', '14', '15', '16', '17','18','19','20','21', '22', '23', '24', '25', '26', '27','28','29','30']
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               data: [parseInt("${open['1']}"), parseInt("${open['2']}"), parseInt("${open['3']}"), parseInt("${open['4']}"), parseInt("${open['5']}"), parseInt("${open['6']}"), parseInt("${open['7']}"), parseInt("${open['8']}"), parseInt("${open['9']}"), parseInt("${open['10']}"), parseInt("${open['11']}"), parseInt("${open['12']}"), parseInt("${open['13']}"),parseInt("${open['14']}"), parseInt("${open['15']}"), parseInt("${open['16']}"), parseInt("${open['17']}"),parseInt("${open['18']}"), parseInt("${open['19']}"), parseInt("${open['20']}"), parseInt("${open['21']}"),parseInt("${open['22']}"), parseInt("${open['23']}"), parseInt("${open['24']}"), parseInt("${open['25']}"),parseInt("${open['26']}"), parseInt("${open['27']}"), parseInt("${open['28']}"), parseInt("${open['29']}"),parseInt("${open['30']}"), parseInt("${open['31']}")],
               type: 'line',
               areaStyle: {
                   normal: {
                       label : {
                           show:true,
                           position:'top',
                           formatter:'{c}',
                           textStyle: {color:'#000'}
                       }
                   }
               }
           }]
       };
       myChart3.setOption(option3);

       var myChart4 = echarts.init(document.getElementById('Live'));
       option4 = {
           tooltip: {
               trigger: 'axis'
           },
           grid: {
               x:50,
               y:20,
               x2:50,
               y2:20,
               borderWidth:1
           },

           xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11', '12', '13', '14', '15', '16', '17','18','19','20','21', '22', '23', '24', '25', '26', '27','28','29','30']
           },
           yAxis: {
               type: 'value'
           },
           series: [
               {
                   name:'入住人员',
                   type:'line',
                   stack: '总量',
                   data: [parseInt("${tenantUser['1']}"), parseInt("${tenantUser['2']}"), parseInt("${tenantUser['3']}"), parseInt("${tenantUser['4']}"), parseInt("${tenantUser['5']}"), parseInt("${tenantUser['6']}"), parseInt("${tenantUser['7']}"), parseInt("${tenantUser['8']}"), parseInt("${tenantUser['9']}"), parseInt("${tenantUser['10']}"), parseInt("${tenantUser['11']}"), parseInt("${tenantUser['12']}"), parseInt("${tenantUser['13']}"),parseInt("${tenantUser['14']}"), parseInt("${tenantUser['15']}"), parseInt("${tenantUser['16']}"), parseInt("${tenantUser['17']}"),parseInt("${tenantUser['18']}"), parseInt("${tenantUser['19']}"), parseInt("${tenantUser['20']}"), parseInt("${tenantUser['21']}"),parseInt("${tenantUser['22']}"), parseInt("${tenantUser['23']}"), parseInt("${tenantUser['24']}"), parseInt("${tenantUser['25']}"),parseInt("${tenantUser['26']}"), parseInt("${tenantUser['27']}"), parseInt("${tenantUser['28']}"), parseInt("${tenantUser['29']}"),parseInt("${tenantUser['30']}"), parseInt("${tenantUser['31']}")],
                   itemStyle:{
                       normal: {
                           color:"#53a8e1"
                       }
                   }
               },
               {
                   name:'退租人员',
                   type:'line',
                   stack: '总量',
                   data: [parseInt("${tenantUser2['1']}"), parseInt("${tenantUser2['2']}"), parseInt("${tenantUser2['3']}"), parseInt("${tenantUser2['4']}"), parseInt("${tenantUser2['5']}"), parseInt("${tenantUser2['6']}"), parseInt("${tenantUser2['7']}"), parseInt("${tenantUser2['8']}"), parseInt("${tenantUser2['9']}"), parseInt("${tenantUser2['10']}"), parseInt("${tenantUser2['11']}"), parseInt("${tenantUser2['12']}"), parseInt("${tenantUser2['13']}"),parseInt("${tenantUser2['14']}"), parseInt("${tenantUser2['15']}"), parseInt("${tenantUser2['16']}"), parseInt("${tenantUser2['17']}"),parseInt("${tenantUser2['18']}"), parseInt("${tenantUser2['19']}"), parseInt("${tenantUser2['20']}"), parseInt("${tenantUser2['21']}"),parseInt("${tenantUser2['22']}"), parseInt("${tenantUser2['23']}"), parseInt("${tenantUser2['24']}"), parseInt("${tenantUser2['25']}"),parseInt("${tenantUser2['26']}"), parseInt("${tenantUser2['27']}"), parseInt("${tenantUser2['28']}"), parseInt("${tenantUser2['29']}"),parseInt("${tenantUser2['30']}"), parseInt("${tenantUser2['31']}")],
                   itemStyle:{
                       normal: {
                           color:"#7de4fa"
                       }
                   }
               }
           ]
       };
       option5 = {
           tooltip: {
               trigger: 'axis'
           },
           grid: {
               x:50,
               y:20,
               x2:50,
               y2:20,
               borderWidth:1
           },

           xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11', '12']
           },
           yAxis: {
               type: 'value'
           },
           series: [
               {
                   name:'入住人员',
                   type:'line',
                   stack: '总量',
                   data: [parseInt("${tenantUser3['1']}"), parseInt("${tenantUser3['2']}"), parseInt("${tenantUser3['3']}"), parseInt("${tenantUser3['4']}"), parseInt("${tenantUser3['5']}"), parseInt("${tenantUser3['6']}"), parseInt("${tenantUser3['7']}"), parseInt("${tenantUser3['8']}"), parseInt("${tenantUser3['9']}"), parseInt("${tenantUser3['10']}"), parseInt("${tenantUser3['11']}"), parseInt("${tenantUser3['12']}")],
                   itemStyle:{
                       normal: {
                           color:"#53a8e1"
                       }
                   }
               },
               {
                   name:'退租人员',
                   type:'line',
                   stack: '总量',
                   data: [parseInt("${tenantUser4['1']}"), parseInt("${tenantUser4['2']}"), parseInt("${tenantUser4['3']}"), parseInt("${tenantUser4['4']}"), parseInt("${tenantUser4['5']}"), parseInt("${tenantUser4['6']}"), parseInt("${tenantUser4['7']}"), parseInt("${tenantUser4['8']}"), parseInt("${tenantUser4['9']}"), parseInt("${tenantUser4['10']}"), parseInt("${tenantUser4['11']}"), parseInt("${tenantUser4['12']}")],
                   itemStyle:{
                       normal: {
                           color:"#7de4fa"
                       }
                   }
               }
           ]
       };
       myChart4.setOption(option5);
       $("#userNumber").change(function(){
           //alert(document.getElementById("allItem").selected);
           if(document.getElementById("one").selected == true){
               myChart4.setOption(option4);
           }else{
               myChart4.setOption(option5);
           }
       });

       $("#all").change(function(){
           //alert(document.getElementById("allItem").selected);
           if(document.getElementById("allItem").selected == true){
               $("#timeText").hide();
               $("#timeSelect").hide();
           }else{
               $("#timeText").show();
               $("#timeSelect").show();
           }
       });
   </script>
</body>
</html>